<template>
  <!-- 待分配客户查询 -->
  <div>
    <div style="height: 30px; line-height: 30px;padding-left: 20px;">
      <h1>待分配客户查询</h1>
    </div>
    <div>
      <ui-form v-model="searchForm" label-width="100px" class="query-form">
        <ui-form-item label="客户类型">
          <ui-select v-model="searchForm.prowlreType" placeholder="请选择客户类型">
            <ui-option :value="0" label="零售"></ui-option>
            <ui-option :value="1" label="公司"></ui-option>
          </ui-select>
        </ui-form-item>
        <ui-form-item label="所属机构">
          <ui-select v-model="searchForm.institutionalUnit" placeholder="请选择所属机构">
            <!-- <ui-option v-for="" :key="" :label="" :value=""></ui-option>       -->
            <ui-option :value="0" label="零售"></ui-option>
            <ui-option :value="1" label="公司"></ui-option>
          </ui-select>
        </ui-form-item>

        <ui-form-item label="客户登记">
          <ui-select v-model="searchForm.institutionalUnit" placeholder="请选择所属机构">
            <!-- <ui-option v-for="" :key="" :label="" :value=""></ui-option>       -->
            <ui-option :value="0" label="零售"></ui-option>
            <ui-option :value="1" label="公司"></ui-option>
          </ui-select>
        </ui-form-item>
        <ui-form-item label="客户号">
          <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerName"> </ui-input>
        </ui-form-item>
        <ui-form-item label="客户名称">
          <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerName"> </ui-input>
        </ui-form-item>
        <ui-form-item label="联系电话">
          <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.phoneNumber"> </ui-input>
        </ui-form-item>
        <ui-form-item label="证件号码">
          <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerId"> </ui-input>
        </ui-form-item>

        <ui-form-item style="float: right;">
          <ui-button class="primary-btn" @click="searchList" icon="ui-icon-search" :disabled="btnDisabled">查询</ui-button>
          <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
        </ui-form-item>
      </ui-form>

      <div style="height: 50px;  line-height: 50px;">
        <span style="float: left;">
          客户列表
        </span>
        <div class="customer-list-btns">
          <ui-button class="primary-btn mg-bt-20 buttonright" @click="goCostomerPage" icon="ui-icon-plus">客户分配</ui-button>
          <ui-button class="primary-btn mg-bt-20 buttonright" @click="goDistributionListPage">名单分配</ui-button>
        </div>
      </div>

      <div>
        <vx-table
          :table-data="tableData"
          :is-select="true"
          :columns="columns"
          @multipleSelection="multipleSelection"
          :buttom-group="buttomGroup"
          @updataData="updataData"
        ></vx-table>
      </div>

      <ui-pagination
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :layout="layout"
        :page-sizes="pageSizeList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </ui-pagination>
    </div>
  </div>
</template>
<script>
import vxTable from '@/components/vx-table';
export default {
  name:'distribution-search',
  components: {
    vxTable,
  },
  data() {
    return {
      dialogVisible: true,
      title: '反显',
      isJump: false,
      btnDisabled: true,
      searchForm: {},
      layout: 'total, sizes, prev, pager, next, jumper', // 分页顺序
      columns: [
        {
          prop: 'userName',
          label: '客户号',
          fixed: true,
          width: '120',
        },
        {
          prop: 'userName',
          label: '客户名称',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '客户类型',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '联系电话',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '证件类型',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '证件号码',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '所属机构',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '金融资产',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '客户等级',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '客户等级',
          fixed: true,
        },
        {
          prop: 'userName',
          label: '客户等级',
          fixed: true,
        },
      ], //表头
      tableData: [],
      buttomGroup: [],
    };
  },
  watch: {
    searchForm: {
      handler(newVal, oldVal) {
        if (Object.keys(this.searchForm).length === 0) {
          this.btnDisabled = true;
        } else {
          let arr = Object.values(this.searchForm);
          if (arr == undefined || arr == null || arr == '') {
            this.btnDisabled = true;
            return true;
          } else {
            this.btnDisabled = false;
            return;
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.tableData = [
      {
        userName: '1',
        updatedBya: '2',
        updatedByb: '3',
        updatedByc: '4',
        updatedBye: '5',
        updatedByf: '5',
        updatedByg: '5',
        updatedByh: '5',
      },
      {
        userName: '12',
        updatedBya: '2',
        updatedByb: '3',
        updatedByc: '4',
        updatedBye: '5',
        updatedByf: '5',
        updatedByg: '5',
        updatedByh: '5',
      },
    ];
  },
  methods: {
    // 多选
    multipleSelection(val) {
      if (val.length === 0) {
        this.isJump = false;
      } else {
        this.isJump = true;
      }
    },
    goCostomerPage() {
      if (this.isJump) this.$router.push({ path: '/customerdivision/distribution/distributionenter' });
      else this.$message.info('未选择客户，请先选择客户！');
    },
    // 查询
    searchList() {},
    // 重置
    reset() {},
    // 名单分配页面
    goDistributionListPage() {
      this.$router.push({ path: '/customerdivision/distribution/distributionlist' });
    },
    //
    updataData() {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ui-form-item__content {
  height: 40px;
}
.buttonright {
  float: right;
  margin-right: 20px;
}
</style>
